<template>
	<view class="Qr" v-for=" item in list " :key="item.id">
		<view class="fwDz" @click="goDz(state.ji)">
			<text class="wz" v-if="!list2.length">请填写服务地址</text>
			<view class="wd" v-for="item in list2" :key="item.id" v-else>
				<view class="mr">
					{{item.province}}{{item.city}}{{item.district}} 
				</view>
				<view class="mz">
					{{item.name}} {{item.phone}}
				</view>
			</view>
			<uni-icons type="right" class="tb"></uni-icons>
		</view>
		<view class="xq" >
			<view class="sp_img">
				<image :src="item.img" class="sp_img1"></image>
			</view>
			<view class="sp_name">
				{{item.name}}
			</view>
			<view class="sp_price">
				￥{{item.price}}
			</view>
		</view>
		<view class="zf">
			<view class="jg">
				需支付: <text class="jq">￥{{item.price}}</text>
			</view>
			<view class="js">
				去结算
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { getXq } from '/api/modules/orderGood.js'
import { getGive, getAddressList } from '../../api/modules/address1.js'
import { reactive, toRefs } from 'vue'
import { UserStore } from '../../store/user';
import { storeToRefs } from 'pinia'
const userStore = UserStore()
const state = reactive({ list: [], list2: [], ji: true,  id:'' })
// 页面加载
onLoad((options) => {
	console.log(options);
	state.id = options.id
	state.ressid = options.ressid
	xd()
	
})

// 获取下单详情
const xd = async () => {
		const data  = await getXq(state)
		state.list = data
	}
	
// 获取默认收货地址
const dz = async (id) => {
	const a = { id: userStore.id }
	const data = await getGive(a)
	state.list2 = data
}

const dz2 = async (id) => {
	const a = { ressid: id }
	const data = await getAddressList(a)
	state.list2 = data
	console.log(data);
}

// 跳转到地址列表
const goDz = () => {
	uni.redirectTo({
		url: `../address_home/address_home?ji=${state.id}`
	})
}
// 页面显示
onShow(() => {
	dz()
	if(state.ressid ) {
		dz2(state.ressid)
	}
})

// 页面隐藏
onHide(() => {
	
})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {
	
})

const { list, list2, ji , id } = toRefs(state)
</script>

<style lang="scss">
.Qr {
	background-color: rgb(222, 222,222);
	.fwDz {
		background-color: #fff;
		margin-top: 30rpx;
		height: 120rpx;
		border-bottom: 1px solid #ccc;
		.wz {
			font-size: 18px;
			font-weight: 800;
			margin-left: 20rpx;
		}
		.wd {
			float: left;
			margin-left: 20rpx;
		}
		.tb {
			float: right;
			margin-right: 20rpx;
		}
	}
	.xq {
		background-color: #fff;
		padding-top: 50rpx;
		.sp_img {
			float: left;
			.sp_img1 {
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
				margin-left: 40rpx;
				padding-right: 30rpx;
			}
		}
		.sp_name {
			font-weight: 600;
		}
		.sp_price {
			margin-top: 20rpx;
			font-weight: 500;
		}
	}
	.zf {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		border-top: 1px solid #ccc;
		.jg {
			margin-top: 20rpx;
			margin-left: 20rpx;
			float: left;
			.jq {
				color: rgb(253, 118, 90);
			}
		}
		.js {
			width: 300rpx;
			height: 100rpx;
			text-align: center;
			color: #fff;
			line-height: 100rpx;
			background-color: rgb(253, 118, 90);
			float: right;
		}
	}
}
</style>
